<template>
  <view class="container">
    <headers title='商品分类'></headers>

    <!-- 列表 -->
    <view class="">
      <u-tabs :list="list" :is-scroll="false" :current="current" @change="change()"></u-tabs>
    </view>

    <!-- 商品分类 -->
    <view class="product_sort" v-for="item in 4">
      <text>大学生服务专区 ></text>
      <view class="sort_buttons">
        <button>自习室</button>
        <button>公寓</button>
        <button>房屋出租</button>
        <button>旧电动自行车</button>
        <button>旧自行车</button>
        <button>旧电脑</button>
        <button>二手智障</button>
      </view>
    </view>
  </view>
</template>

<script>
  import headers from '../../components/headers/headers.vue'
  import {
    request
  } from "@/request/index.js"
  import regeneratorRuntime from '@/lib/runtime/runtime';
  export default {
    data() {
      return {
        list: [{
            name: 'DIY产品'
          }, {
            name: '百货'
          },
          {
            name: '二手商品',
            // count: 5
          }
        ],
        current: 0
      }
    },
    methods: {
      change(index) {
        this.current = index;
      }
    }
  }
</script>

<style scoped lang="scss">
  .container {
    background-color: #fff;
  }

  // 商品分类
  .product_sort {
    padding: 40rpx 0rpx 0 32rpx;

    text {
      display: inline-block;
      margin-bottom: 15rpx;
    }

    .sort_buttons {
      display: flex;
      flex-wrap: wrap;

      button {
        margin: 15rpx;
        padding: 20rpx 40rpx;
        font-size: 32rpx;
        font-weight: 500;
        color: #333333;
        line-height: 32rpx;

        background: #FFFFFF;
        border-radius: 40rpx 40rpx 40rpx 40rpx;
        border: 2rpx solid #DDDDDD;
      }
    }
  }
</style>